import { Vue } from "vue-property-decorator";
import Dialog from "./index.vue"; // 导入自定义组件

let vm: any;
// eslint-disable-next-line @typescript-eslint/no-empty-function
const noop = () => {};

function createVNode(resolve: any = noop, reject: any = noop, props: any) {
    return new Vue({
    mixins: [
      {
        mounted() {
            document.body.append((this as any).$el); // this.$el表示当前vue实例使用的根DOM元素
        },
        beforeDestroy() {
            document.body.removeChild((this as any).$el);
        },
        methods: {
          confirm(data: any) {
              resolve(data); // todo something confirm
              this.$destroy();
          },
          close() {
              reject("关闭"); // todo something close
              this.$destroy();
          }
        },
        render(createElement) {
            return createElement(Dialog, {
            // 绑定在Dialog组件上的事件
            on: {
              confirm: (this as any).confirm,
              close: (this as any).close
            },
            props
            });
        }
      }
    ]
    });
}

function show(props: any) {
    return new Promise((resolve: any, reject: any) => {
        if (vm) {
            vm.$destroy();
        }
        vm = createVNode(resolve, reject, props);
        vm.$mount(); // 如果没有提供参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中
    });
}

export default {
  install(vue: any) {
      vue.prototype.$selectPerson = show;
  }
};

